import React, { useState,useEffect } from 'react';
import { Modal, Button,Row,Col } from 'antd';
import { useNavigate } from "react-router-dom";
 
 const CancelModel = (props) => {
    let navigation=useNavigate();
  const [isModalVisible, setIsModalVisible] = useState(false);
    useEffect(()=>{
        setIsModalVisible(props.store.cancelModelStatus);
    },[props])

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Modal title="确认丢失修改的内容" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}
         footer={
            [] // 设置footer为空，去掉 取消 确定默认按钮
            }
      >
        <p style={{textAlign: 'center'}}>所有修改都会被丢失请确认?</p>
        <Row>
            <Col span={12} push={2}>
                <Button
                onClick={() =>{
                    props.dispatch({type:'changeCancelModel',state: false});
                }}
                >回到当前页面</Button>
            </Col>
            <Col span={12}><Button 
            onClick={() =>{
               navigation(props.path);
            }}
            >回到主页面</Button></Col>
        </Row>
       
      </Modal>
    </>
  );
};

export default CancelModel;